<template>
  <div
    :class="{ 'w-pointer': !finishx }"
    :infinite-scroll-disabled="loadingx"
    v-infinite-scroll="loadMore"
    class="load-more w-flex-center"
    infinite-scroll-distance="50"
    @click="loadMore">
    <span class="line"/>
    <span class="text">{{ finishx ? '我是有底线的': '加载更多' }}</span>
    <span class="line"/>
  </div>
</template>

<script>
  /**
   * 上拉加载
   */
  export default {
    name: 'ComLoadMore',
    props: {
      /**
       * 是否加载中
       */
      loading: {
        type: Boolean,
        default: false
      },
      /**
       * 是否加载完成
       */
      finish: {
        type: Boolean,
        default: false
      },
      /**
       * 列表加载模型
       */
      loadModel: {
        type: Object,
        default () {
          return null
        }
      },
    },
    data() {
      return {
      }
    },
    computed: {
      loadingx() {
        return this.loadModel ? this.loadModel.loading : this.loading
      },
      finishx() {
        return this.loadModel ? this.loadModel.finish : this.finish
      }
    },
    methods: {
      /**
       * 加载更多
       */
      loadMore() {
        if (this.finishx) {
          return
        }
        if (this.loadModel) {
          this.loadModel.loadData().w_then()
        } else {
          this.$emit ('loadMore')
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .load-more {
    height: 60px;
    font-size: 16px;
    font-family: PingFangSC-Regular;
    color: rgba(159, 163, 176, 1);

    > .text {
      flex: 0 1 auto;
    }
    > .line {
      height: 1px;
      background-color: #ddd;
      margin: 0 20px;
      flex: 1 0 auto;
    }
  }
</style>

